<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--作用域插槽：当子组件做循环，或者某一部分应该由外部传递进来当时候；
            子组件可以向父组件的插槽中传数据，父组件中想接收数据，必须在外层使用template标签，
            并且使用slot-scope对应的属性名来接收数据
        -->
        <child>
            <template slot-scope="props" slot="li">
                <li><span v-if="props.item.isComplete">yes</span>{{props.item.val}}</li>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function(){
              return {
                  list: [{
                      isComplete: true,
                      val: 1
                  },{
                      isComplete: false,
                      val: 2
                  },{
                      isComplete: false,
                      val: 3
                  },{
                      isComplete: true,
                      val: 4
                  }]
              }
            },
            template: `<div>
                            <ul>
                                <slot name="li" v-for="item of list" :item="item">{{item}}</slot>
                            </ul>
                       </div>`
        })
        let vm = new Vue({
            el:"#root",
            data: {

            }
        })
    </script>
</body>
</html>
